<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="/iframe/css/main.css" />
		<script src="/iframe/js/main.js" defer="search_input"></script>
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="header">
				<svg
					t="1749884370067"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="3551"
					width="40"
					height="40"
				>
					<path
						d="M853.333333 138.666667H170.666667c-17.066667 0-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V202.666667h277.333333v618.666666H384c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h256c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32h-96v-618.666666h277.333333V298.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V170.666667c0-17.066667-14.933333-32-32-32z"
						fill="#5588FF"
						p-id="3552"
					></path>
				</svg>
				<span class="hrader-title">一键丝印</span>
			</div>
			<div class="body">
				<div class="left">
					焊盘网络名<span class="data-module" id="part-number">none</span><br />
					唯一标识符<span class="data-module" id="unique-id">none</span><br />
					X轴坐标<span class="data-module" id="x-coordinate">none</span><br />
					Y轴坐标<span class="data-module" id="y-coordinate">none</span><br />
				</div>
				<div class="right">
					丝印大小<input type="range" min="35" max="200" value="35" class="input-slider" id="stencil-size-slider" />
					<span id="stencil-size">35mil</span><br />
					丝印方向<br /><select name="dropdown" id="stencil-direction">
						<option value="0">0°</option>
						<option value="90">90°</option>
						<option value="180">180°</option>
						<option value="270">270°</option></select
					><br />
					放置位置<br /><select name="dropdown" id="placement-position">
						<option value="x+20mil">x+20mil</option>
						<option value="x-20mil">x-20mil</option>
						<option value="y+20mil">y+20mil</option>
						<option value="y-20mil">y-20mil</option></select
					><br />
				</div>
			</div>
			<div class="switch-container">
				<label>ON/OFF</label>
				<label class="switch">
					<input type="checkbox" />
					<span class="slider round"></span>
				</label>
				<button class="generate-button">生成</button>
			</div>
			<div class="image_show"></div>
			<div class="bottom"><span class="iconfont"> &#xe687; </span>开发者：<a href="https://github.com/jlceda" target="_blank">Macida</a></div>
		</div>
		<script>
			const stencilSizeSlider = document.getElementById('stencil-size-slider');
			const stencilSizeDisplay = document.getElementById('stencil-size');
			stencilSizeSlider.addEventListener('input', function () {
				stencilSizeDisplay.textContent = stencilSizeSlider.value + 'mil';
			});
		</script>
	</body>
</html>
